<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_extension.activityDetail }}</view>
			</view>
			
			<u-gap height="1" bg-color="#eee"></u-gap>
		</view>

		<mescroll-body  height="calc(100vh - 378rpx - var(--status-bar-height))" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view style="padding: 0 40rpx 24rpx;border-bottom: 10rpx solid #FBFBFB;">
				<view class="u-p-t-24 u-f-40 u-lh-56 linecamp-1 font-medio">{{ dataInfo.title || '' }}</view>
				
				<view class="u-f-28 u-lh-40 color-grew">{{ dayjs(dataInfo.createTime || dayjs()).format('YYYY-MM-DD') || '' }}</view>
				
				<!-- <view class="u-m-t-22" style="height: 258rpx; border-radius: 12rpx; background-color: #eaeaea;"></view> -->
			<!-- 	<view class="u-m-t-22">
					<x-parse :content="dataInfo.desc"/>
				</view> -->
				
				<view class="u-m-t-24 u-f-30 u-lh-42">{{ dataInfo.subTitle || '' }}</view>
			</view>
			
			<view style="padding: 24rpx 40rpx 0;" class="u-f-30 u-lh-42">
				<view class="u-f-32 u-lh-44 font-medio">{{ lang_extension.activityIntroduce }}</view>
				<view v-for="(item, index) in introduceInfo" :key="index" class="flex-center u-p-t-24">
					<view class="u-p-r-10">{{ lang_extension[item.labelKey] }}:</view>
					<view v-if="item.labelKey === 'activityPeople'" class="color-grew">{{ dataInfo.activityUserCount || 0 }}/{{ dataInfo.limtCount || 0 }}</view>
					<view v-else-if="item.labelKey === 'activityTime'" class="color-grew">{{ dayjs(dataInfo.tmpHeadStartTime || dayjs()).format('YYYY/MM/DD') }}~{{ dayjs(dataInfo.tmpHeadEndTime || dayjs()).format('YYYY/MM/DD') }}</view>
					<view v-else-if="item.labelKey === 'settlementTime'" class="color-grew">{{ lang_personal.activityEnd[0] }}{{ dataInfo.settleDays || 0 }}{{ lang_personal.activityEnd[0] }}</view>
					<view v-else-if="item.labelKey === 'interimHeadTime'" class="color-grew">{{ formatDay }}{{ lang_time.day }}</view>
					<view v-else-if="item.labelKey === 'everyExtensionMoney'" class="flex-baseline color-red-dep font-bold">
						<view class="u-f-24 u-lh-32">{{ lang_unit.money }}</view>
						<view>{{ dataInfo.singleAwardAmount || 0 }}</view>
					</view>   
				</view>
			</view>
			
			<view class="u-p-t-84 u-p-b-40 flex-center-center">
				<x-common-btn
				background="#FD1E43" @click="saveAction" :disabled="dataInfo.hasSigned">
					<view>{{ lang_personal.signNow }}</view>
				</x-common-btn>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import { userActivityInfo, userActivitySign } from '@/api/personal.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				introduceInfo: [
					{ key: '', labelKey: 'activityPeople', label: '活动人数' },
					{ key: '', labelKey: 'activityTime', label: '活动时间' },
					{ key: '', labelKey: 'settlementTime', label: '结算时间' },
					{ key: '', labelKey: 'interimHeadTime', label: '临时团长时间' },
					{ key: '', labelKey: 'everyExtensionMoney', label: '每个推广金额' },
				],
				
				activityId: '',
				dataInfo: {}
			}
		},
		computed: {
			formatDay() {
				let { tmpHeadStartTime, tmpHeadEndTime } = this.dataInfo
				let startValue = this.dayValue(tmpHeadStartTime)
				let endValue = this.dayValue(tmpHeadEndTime)
				let timeValue = endValue - startValue
				return parseInt(timeValue / 24 / 3600 /1000)
			}
		},
		onLoad({ activityId }) {
			this.activityId = activityId
		},
		methods: {
			dayValue(d) {
				return this.dayjs(d || this.dayjs()).valueOf();
			},
			// 提交表单
			saveAction() {
				if (this.dataInfo.hasSigned) return
				userActivitySign({ activityId: this.activityId }).then((data) => {
					this.downCallback()
				})
			},
			// 初始化详情
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			async upCallback(page) {
				let node = this.$refs['mescrollRef']
				if (!this.activityId || page.num > 1) {
					node && node.mescroll.endSuccess(10);
					return 
				}
				userActivityInfo({ activityId: this.activityId }).then(data => {
					node && node.mescroll.endSuccess(10);
					this.dataInfo = data
				}).catch((e) => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style scoped lang="scss">
	
</style>
